<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="header">
      <div class="header_left">
        <div class="iconfontcolor icon-dairenzhenggongyingshang"></div>
        <div class="header_left_info">
          <div class="title">
            <div class="name">{{ BasicData.name }}</div>
            <div class="tag">承运货主</div>
          </div>
          <div class="text">
            <div style="margin-right: 29px">
              创建时间：{{ BasicData.createTime }}
            </div>
            <div>创建人：{{ BasicData.createBy }}</div>
          </div>
        </div>
      </div>
      <div class="header_right">
        <button class="deleteBtn" @click="DeleteItem($route.params.ownerId)">
          删除
        </button>
        <button
          class="primaryBtn"
          @click="
            $router.push({
              path: '/Carrier/acceptCarriage/AddCargoOwner',
              query: { ownerId: $route.params.ownerId },
            })
          "
        >
          编辑
        </button>
        <!-- <button class="primaryBtn">更新日志</button> -->
      </div>
    </div>

    <div class="main">
      <el-tabs class="mainTabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div class="main_item">
            <BasicInfo :BasicData="BasicData"></BasicInfo>
          </div>
        </el-tab-pane>
        <el-tab-pane label="合同信息" name="second">
          <div class="main_item">
            <contractInfo :contractInfoData="contractInfoData"></contractInfo>
          </div>
        </el-tab-pane>
        <el-tab-pane label="路线信息" name="third">
          <div class="main_item">
            <lineInfo :lineInfoData="lineInfoData"></lineInfo>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue"; //引入面包屑导航
import BasicInfo from "./subAcceptCarriageDetails/BasicInfo.vue"; //基本信息
import contractInfo from "./subAcceptCarriageDetails/contractInfo.vue"; //合同信息
import lineInfo from "./subAcceptCarriageDetails/lineInfo.vue"; //线路信息
import httpApi from "@/http";
export default {
  data() {
    return {
      activeName: "first",
      ownerId: "",
      BasicData: {}, //基本信息数据
      contractInfoData: [], //合同信息数据
      lineInfoData: [], //线路信息数据
    };
  },
  methods: {
    handleClick(tab, event) {},
    getOwnerDetailsData() {
      this.ownerId = this.$route.params.ownerId;
      // console.log(this.$route.params.ownerId);
      let params = { ownerId: this.ownerId };
      httpApi.cargoOwnerApi.getOwnerDetails(params).then((res) => {
        // console.log("详情结果", res);
        this.BasicData = res.data.data;
        // console.log(this.BasicData);
        res.data.data.userLineListVoList.forEach(item=>{
          item.startAddress=item.startAddress.split(',')
          item.endAddress=item.endAddress.split(',')
        })
        this.contractInfoData = res.data.data.contractListVoList;
        this.lineInfoData = res.data.data.userLineListVoList;
      });
    },
    init() {
      this.getOwnerDetailsData();
    },
    DeleteItem(ownerId) {
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 发起单个删除请求

          httpApi.cargoOwnerApi
            .deleteSingleCargoOwner({ ownerId: ownerId })
            .then((res) => {
              // console.log("删除结果", res);
              if (res.data.code == 200) {
                this.$router.go(-1);
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  created() {
    this.init();
  },
  mounted() {},
  components: {
    breadcrumb,
    BasicInfo,
    contractInfo,
    lineInfo,
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  height: 119px;
  padding: 35px 40px 42px 35px;
  margin-bottom: 9px;

  .header_left {
    display: flex;

    .icon-dairenzhenggongyingshang {
      font-size: 42px;
      margin-right: 13px;
    }

    .header_left_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 42px;

      .title {
        display: flex;
        align-items: center;

        .name {
          color: #262626;
          font-size: 18px;
          font-weight: bold;
          margin-right: 19px;
        }

        .tag {
          color: #1890ff;
          font-size: 12px;
          background-color: #ecf5fe;
          border-radius: 4px;
          padding: 4px 7px;
          text-align: center;
          transform: scale(0.83);
        }
      }

      .text {
        display: flex;
        color: #939393;
        font-size: 12px;
      }
    }
  }

  .header_right {
    > button {
      width: 80px;
      margin-top: 6px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      cursor: pointer;
      transition: 0.2s;
      font-size: 12px;
      border-radius: 4px;
      margin-left: 14px;

      &:hover {
        opacity: 0.8;
      }
    }

    .deleteBtn {
      border: 1px solid #d9d9d9;
      color: #262626;
    }

    .primaryBtn {
      background-color: #1890ff;
      color: #ffffff;
    }
  }
}

.main {
  background-color: #fff;
  height: 712.1px;

  .mainTabs {
    ::v-deep .el-tabs__nav {
      margin-left: 35px;
    }

    // 标签页切换按钮
    ::v-deep .el-tabs__item {
      height: 48px;
      width: 88px;
      text-align: center;
      padding: 0;
      line-height: 48px;
      font-size: 12px;
      font-weight: bold;
      color: #939393;
    }

    // 下边框
    ::v-deep .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #f0f0f0;
    }

    // 标签页切换按钮 激活样式
    ::v-deep .el-tabs__item.is-active {
      background-color: #ecf5fe;
      color: #1890ff;
    }

    .main_item {
      height: calc(100% - 48px);
      padding: 34px 35px 49px;
    }
  }
}
</style>
